<template>
  <div class="mainBody">
    <div class="layout" :class="{'layout-hide-text': spanLeft < 3}">
      <Row type="flex">
        <i-col class="layout-menu-left" :span="spanLeft">
          <Menu ref="menu" :active-name="activeName" width="auto" :open-names="openNames" @on-select="handleSelect">
            <div class="layout-logo-box">
              <div class="layout-logo-left"></div>
            </div>
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-gear" :size="iconSize"></Icon>
                <span class="layout-text">工作台</span>
              </template>
              <Menu-item name="">首页</Menu-item>
            </Submenu>
            <Submenu name="articles">
              <template slot="title">
                <Icon type="ios-color-filter" :size="iconSize"></Icon>
                应用管理
              </template>
              <Menu-item name="3">个人管理</Menu-item>
              <Menu-item name="1">文章管理</Menu-item>
              <Menu-item name="resourceInfo">资源管理</Menu-item>
              <Menu-item name="friendLink">友链管理</Menu-item>
              <Menu-item name="markdown">留言管理</Menu-item>
            </Submenu>
          </Menu>
        </i-col>
        <i-col :span="spanRight" style="height: 100%;overflow: hidden;">
          <!--没有头部-->
          <div class="layout-header">
            <!-- 点击左侧栏收缩 -->
            <!--<i-button type="text" @click="toggleClick">
              <Icon type="navicon" size="32"></Icon>
            </i-button>-->
            <!-- 当前登录信息 -->

            <div class="layout-header-loginInfo">
              <Dropdown>
                <Button-group size="small">
                  <Button type="ghost" icon="android-person">当前用户：{{curUserName}}</Button>
                  <Button type="ghost" icon="log-out" @click="loginOut()">退出</Button>
                </Button-group>
                <DropdownMenu slot="list">
                  <DropdownItem><a href="" class="dropLink">查看详情</a></DropdownItem>
                  <DropdownItem><a href="" class="dropLink">修改密码</a></DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
          </div>
          <router-view></router-view>
          <div class="layout-copy">
            2011-2016 &copy; 苞谷米

          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import storage from 'utils/helpers/storageLite';
  export default {
    name: 'layout',
    data () {
      return {
        spanLeft: 3,
        spanRight: 21,
        activeName: '',
        curUserName: storage.get('user').replace(/\"/g, ''),
        openNames: []
      };
    },
    created () {
      this.update();
    },
    computed: {
      iconSize () {
        return this.spanLeft === 3 ? 14 : 24;
      }
    },
    methods: {
      handleSelect (name) {
        this.$router.push(name);
      },
      update (route) {
        const path = route ? route.path : this.$route.path;
        const openName = path.split('/')[1];
        const activeName = '/' + openName;
        this.$set(this, 'activeName', activeName);
        this.$set(this, 'openNames', [openName]);
      },
      toggleClick () {
        if (this.spanLeft === 3) {
          this.spanLeft = 1;
          this.spanRight = 23;
        } else {
          this.spanLeft = 3;
          this.spanRight = 21;
        }
      },
      loginOut () {
        storage.remove('user');
        this.$router.push('/login');
      }
    }
  };
</script>

<style lang="less">
  .mainBody {
    height: 100%;
    .layout {
      width: 100%;
      height: 100%;
    }
  }
  .dropLink{
    color: #495060;
    font-size: 14px;
  }

  .layout-bodyContent {
    background-color: #F5F7F9;
  }

  .layout .ivu-menu {
    height: 100%;
  }

  .layout .ivu-row-flex {
    height: 100%;
  }

  .layout .layout-copy {
    padding: 5px 0;
    /*position: absolute;
    bottom: 0;
    left: 50%;*/
  }

  .layout {
    /*border: 1px solid #d7dde4;*/
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-bodyContent {
    height: 90%;
    overflow: hidden;
  }

  .layout-breadcrumb {
    padding: 10px 15px 0;
  }

  .layout-content {
    min-height: 200px;
    margin: 15px;
    background-color: #ffffff;
    overflow-y: auto;
    border-radius: 4px;
    height: 95%;
  }

  .layout-content-main {
    padding: 10px;
  }

  .ivu-menu-item a {
    color: #9EA7B4;
  }

  /*.ivu-menu-item a:hover, a.router-link-active {
    color: #ffffff;
  }*/

  .layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
  }

  .layout-menu-left {
    /*background: #464c5b;*/
    background: #ffffff;
  }

  .positionReal {
    position: relative;
  }

  .layout-header {
    width: 100%;
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  /** 头部登录信息 **/
  .layout-header .layout-header-loginInfo {
    float: right;
    margin-top: 15px;
    margin-right: 1%;
  }

  .layout-logo-box {
    background-color: #464c5b;
    width: 100%;
    height: 100px;
    padding-top: 25px;
    text-align: center;
  }

  .layout-logo-left {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url('../../../../../static/image/man.jpg');
    background-size: 100% 100%;
    background-size: cover; /*兼容ie8*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../../static/image/man.jpg', sizingMethod='scale');
    margin: 0px auto;
  }

  .layout-ceiling-main a {
    color: #9ba7b5;
  }

  .layout-hide-text .layout-text {
    display: none;
  }

  .ivu-col {
    transition: width .2s ease-in-out;
  }

  /** 页脚 **/
  .layout-copy {
    padding: 0;
  }
</style>
